<template>
  <header class="head">
      <div class="head-right">
          <div class="head-input">
              <el-input @keyup.enter="searchTable" @clear="searchTable" clearable v-model="search.ServiceID" placeholder="请输入账号搜索">
                  <template #append>
                      <el-button icon="el-icon-search" @click="searchTable"></el-button>
                  </template>
              </el-input>
          </div>
      </div>
      <el-button type="primary" @click="editDiolog(1)">新建</el-button>
  </header>
  <section>
    <ele-table :tableTitleData="tableTitleData" :tableData="tableData" :loading="loading" :pageObj="pageObj" @onchangepage="changePage" >
        <template  #index="scope" >
            <span>{{scope.soltval.key}}</span>
        </template>
        <template  #Status="scope" >
          {{scope.soltval.Status == '1' ? '正常' : '禁用'}}
        </template>
        <template  #all="scope" >
          <span @click="editDiolog(2,scope.soltval)" class="link">编辑</span>
          <span @click="deleteObj(scope.soltval)" class="link">删除</span>
        </template>
    </ele-table>
    <el-dialog
      :title="title"
      v-model="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form :model="form" label-width="60px">
        <el-form-item label="账号：">
          <el-input v-model="form.Id" />
        </el-form-item>
        <el-form-item label="密码：">
          <el-input v-model="form.PassWord" />
        </el-form-item>
        <el-form-item label="状态：">
          <el-radio-group v-model="form.Status" class="ml-4">
              <el-radio label="1" size="large">启用</el-radio>
              <el-radio label="0" size="large">禁用</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input type="textarea" v-model="form.Mark"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleConfirm">确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, getCurrentInstance, onActivated } from "vue";
import eleTable from '@/components/ele-table/index.vue';
import { ElMessage } from "element-plus";

export default defineComponent({
  name: 'User',
  components:{
    eleTable
  },
setup(){
  const instance: any = getCurrentInstance();
  const GL = instance.appContext.config.globalProperties;
  const isAdd = ref(true);
  let user: any = GL.$store.state.factuer || {}
  let dilogTypes = 1;
  const search = reactive({
    ServiceID:'',
  })
  const title = ref('新增用户')
  const dialogVisible = ref(false)
  const form: any = ref({
    Id: '',
    PassWord: '',
    Mark: '',
    Status: '1'
  })
  const loading = ref(true);
  let factuer: any =  {}
  const pageObj = ref({page:1,size:10,total:0})
  const tableTitleData = ref([
    { label: 'ID', slotname: 'index', sortable: true },
    { label: '账号', prop: 'Id' },
    { label: '密码',align:'center', prop: 'PassWord' },
    { label: '备注',align:'center', prop: 'Mark' },
    { label: '状态',align:'center', slotname: 'Status' },
    { label: '操作',align:'center', slotname: 'all' }
  ])
  const tableData = ref([])
  const changePage = (val) =>{
    console.log(val)
  };
  const initForm = () => {
    title.value = '新建用户'
    Object.assign(form.value, {Id: '', PassWord: '', Mark: '', Status: '1'})
  }
  const editForm = (val) => {
    title.value = '编辑用户'
    val.Status = val.Status + ''
    Object.assign(form.value, val)
  }
  const searchTable = () => {
    initData()
  };
  const handleClose = () => {
    dialogVisible.value = false
    initForm()
  }
  const handleConfirm = () => {
    form.value.Type = 1
    form.value.Status = Number(form.value.Status)
    form.value.Type = dilogTypes;
    loading.value = true;
    GL.$axios.post(GL.$api.video.ModifyConfig, { Users: [form.value]})
      .then((res: any) => {
        if(res.Code === 0) {
          loading.value = false;
          ElMessage.success('新增成功')
          handleClose()
          initData()
        }
      })
      .catch((err: any) => {
          loading.value = false;
          handleClose()
      });
  }
  const deleteObj =  (val) => {
    GL.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      val.Type = 0
      val.Status = Number(val.Status)
      await GL.$axios.post(GL.$api.video.ModifyConfig, { Users: [val]})
        .then((res: any) => {
          if(res.Code === 0) {
            loading.value = false;
            ElMessage.success('删除成功')
            initData()
          }
        })
        .finally((err: any) => {
            loading.value = false;
        });
    }).catch(() => {
      GL.$message({
        type: 'info',
        message: '已取消删除'
      });          
    });
  }
  const editDiolog = (type: number,val?: any) => {
    dialogVisible.value = true
    dilogTypes = type
    dilogTypes === 2 ? editForm(val) : initForm()
  }
  const initData = () => {
    loading.value = true;
    GL.$axios.get(GL.$api.video.QueryConfig, {params: {Type: 0,ServiceID:search.ServiceID}})
      .then((res: any) => {
         if(res.Code === 0) {
          res.Users.map((item, index) => {
            item.key = index + 1
          })
          factuer = res
          tableData.value = res.Users
          loading.value = false;
        }
      })
      .catch((err: any) => {
          console.log(err);
          tableData.value = []
          loading.value = false;
      });

      isAdd.value =  true;
  } 
  onActivated(() => {
    searchTable()
  })

  
  return{
    search,
    loading,
    pageObj,
    tableTitleData,
    tableData,
    searchTable,
    changePage,
    editDiolog,
    deleteObj,
    dialogVisible,
    handleClose,
    handleConfirm,
    title,
    form
  }
}
})
</script>

<style lang="scss" scoped>
@import 'index.scss';
</style>
